import React from 'react';
import { Row, Col, Select, TreeSelect } from 'antd';
import ApprovalStatus from '@/components/ApprovalStatus';
import { router } from 'umi';
import _ from 'lodash';
import MyBasicInfo from '@/components/MyBasicInfo';
import moment from 'moment';
import { PageRight } from './Operation';
import { setReturnMoneyPlanVersionName } from '@/utils/versions_name';

const months = [
  {
    title: '年度合计',
    value: '14',
    key: '14',
  },
  {
    title: '全部月份',
    value: '13',
    key: '13',
    children: [
      { key: '1', value: '1', title: '1月' },
      { key: '2', value: '2', title: '2月' },
      { key: '3', value: '3', title: '3月' },
      { key: '4', value: '4', title: '4月' },
      { key: '5', value: '5', title: '5月' },
      { key: '6', value: '6', title: '6月' },
      { key: '7', value: '7', title: '7月' },
      { key: '8', value: '8', title: '8月' },
      { key: '9', value: '9', title: '9月' },
      { key: '10', value: '10', title: '10月' },
      { key: '11', value: '11', title: '11月' },
      { key: '12', value: '12', title: '12月' },
    ],
  },
];

export default function PageTop(props) {
  const {
    overAllYears,
    currentYear,
    currentMonths,
    handlerDelete,
    match,
    versionsList,
    dispatch,
    deleteLoading,
    assessmentLoading,
    handleSetAssessment,
    handleExportReportForm,
    viewApprovedLoading,
    handlerViewApproved,
    setBudgetLoading,
    handlersetBudgetVersion,
    handlercopyBudgetVersion,
  } = props;
  const { level1, level2, project, stage, category, version } = match.params;

  // 切换年份
  const changeCurrentYear = val => {
    if (dispatch) {
      dispatch({
        type: 'ReturnMoneyPlan/changeCurrentYear',
        payload: { currentYear: val },
      });
    }
  };

  // 切换显示月份
  const changeCurrentMonths = arr => {
    if (dispatch) {
      dispatch({
        type: 'ReturnMoneyPlan/changeCurrentMonths',
        payload: { currentMonths: arr },
      });
    }
  };

  /**
   * @Descripttion: 生成版本信息数据
   * @param {*} versionInfo 当前版本信息
   * @return {*} object
   */
  const setBasicInfoData = versionInfo => {
    const basicInfo = [
      {
        label: '版本名称',
        span: 2,
        value: setReturnMoneyPlanVersionName(versionInfo).currentVersionName,
      },
      {
        label: '创建人',
        value: versionInfo.createUser,
      },
      {
        label: '创建时间',
        value: moment(versionInfo.createTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        label: '创建方式',
        value: versionInfo.createMethodName,
      },
      {
        label: '更新时间',
        value: moment(versionInfo.updateTime || versionInfo.createTime).format(
          'YYYY-MM-DD HH:mm:ss',
        ),
      },
    ];
    const accessInfo = [
      {
        label: ['budget'].includes(versionInfo.versionType) ? '回款版本' : '签约版本',
        value: setReturnMoneyPlanVersionName(versionInfo).accessVersionName,
      },
    ];

    return {
      basicInfo,
      accessInfo,
    };
  };

  const currentVersion = _.last(_.filter(versionsList, x => x.versionId === version));
  if (!_.isEmpty(currentVersion)) {
    return (
      <Row type="flex" align="middle" justify="space-between" gutter={[10]}>
        <Col style={{ display: 'flex', alignItems: 'center' }}>
          <Select
            style={{ width: '200px' }}
            size="small"
            onChange={key => {
              router.replace(
                `/OperatingPlan/ReturnMoneyPlan/${level1}/${level2}/${project}/${stage}/${category}/${key}`,
              );
            }}
            value={version}
          >
            {versionsList.map(val => (
              <Select.Option key={val.versionId} value={val.versionId}>
                {setReturnMoneyPlanVersionName(val).currentVersionName}
              </Select.Option>
            ))}
          </Select>
          &nbsp;&nbsp;
          <ApprovalStatus applyType={currentVersion.versionStateCode} />
          &nbsp;&nbsp;
          <MyBasicInfo data={setBasicInfoData(currentVersion)} />
          &nbsp;&nbsp;
          <span>显示：</span>
          <Select
            size="small"
            style={{ width: '100px' }}
            placeholder="请选择"
            value={currentYear}
            onChange={changeCurrentYear}
          >
            {overAllYears.map(data => (
              <Select.Option key={data}>
                {data}
                {new Date().getFullYear().toString() === data.toString() && '(今年)'}
              </Select.Option>
            ))}
          </Select>
          &nbsp;&nbsp;
          <TreeSelect
            size="small"
            style={{ width: '250px' }}
            value={currentMonths}
            mode="multiple"
            onChange={changeCurrentMonths}
            treeCheckable
            maxTagCount={2}
            treeData={months}
          />
        </Col>
        <Col>
          <PageRight
            {...props}
            handlerDelete={handlerDelete}
            currentVersion={currentVersion}
            deleteLoading={deleteLoading}
            viewApprovedLoading={viewApprovedLoading}
            handlerViewApproved={handlerViewApproved}
            handleSetAssessment={handleSetAssessment}
            assessmentLoading={assessmentLoading}
            handleExportReportForm={handleExportReportForm}
            handlersetBudgetVersion={handlersetBudgetVersion}
            handlercopyBudgetVersion={handlercopyBudgetVersion}
            setBudgetLoading={setBudgetLoading}
          />
        </Col>
      </Row>
    );
  }
  return <></>;
}
